<template>
  <div class="view-login">
    <div class="login-form">
      <Card icon="login-in" title="欢迎登录" :bordered="false">
        <Form :model="formData" :rules="rules" @keydown.enter.native="handleSubmit" ref="form">
          <FormItem prop="account">
            <Input v-model="formData.account">
              <span slot="prepend">
                <Icon :size="16" type="ios-person" />
              </span>
            </Input>
          </FormItem>
          <FormItem prop="password">
            <Input v-model="formData.password" type="password">
              <span slot="prepend">
                <Icon :size="16" type="ios-person" />
              </span>
            </Input>
          </FormItem>
          <Button type="primary" long @click="handleSubmit">登录</Button>
        </Form>
      </Card>
    </div>
  </div>
</template>
<script>
export default {
  name: 'login',
  data () {
    return {
      formData: {
        account: '',
        password: ''
      },
      rules: {
        account: [
          {
            required: true, message: '请输入登录账户', trigger: 'blur'
          }
        ],
        password: [
          {
            required: true, message: '请输入密码', trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$router.push('/dashboard')
        }
      })
    }
  }
}
</script>
<style scoped>
.view-login {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-right: 50px;
  box-sizing: border-box;
  background-image: url('../../../public/login_bg.jpg');
  & .login-form {
    width: 300px;
  }
}
</style>
